<template>
    <div class="NavBar">

        <section class="NavImg">

            <div class="leftLogo">
                <img src="../assets/images/logo_h5.png" />
            </div>

            <div class="rightBar">
                <img @click="showNav()" src="../assets/images/dh_h5.png" />
            </div>
        </section>

        <section class="navlist" :class="{ 'hide': !isActive, 'show': isActive }">

            <img @click="closeNav()" class="close" src="../assets/images/dh_gb.png" alt="">
            <div class="list">

                <ul>
                    <li @click="toHome()">
                        <div class="l">

                            <p class="p1">首页</p>
                            <p class="p2">Index</p>
                        </div>
                        <div class="r">
                            <img src="../assets/images/dh_xyb.png" alt="">
                        </div>
                    </li>
                    <li @click="toAboutUs()">
                        <div class="l">
                            <p class="p1">关于我们</p>
                            <p class="p2">About us</p>
                        </div>
                        <div class="r">
                            <img src="../assets/images/dh_xyb.png" alt="">
                        </div>
                    </li>
                    <li @click="toCooperationExchange()">
                        <div class="l">
                            <p class="p1">合作交流</p>
                            <p class="p2">Cooperation exchange</p>
                        </div>
                        <div class="r">
                            <img src="../assets/images/dh_xyb.png" alt="">
                        </div>
                    </li>
                </ul>
            </div>
        </section>

    </div>
</template>

<script>
export default {
    name: 'NavBar',
    data() {
        return {
            pagindex: 0,
            isActive:false
        }
    },
    methods: {
        toHome() {
            this.$router.push('/');
            this.closeNav();
        },
        toAboutUs() {
            this.$router.push('/AboutUs');
            this.closeNav();
        },
        toCooperationExchange() {
            this.$router.push('/CooperationExchange/');
            this.closeNav();
        },
        closeNav(){
            this.isActive = false;
        },
        showNav(){
            this.isActive = true;
        }
    }
}
</script>

<style lang="scss" scoped>
.show {
    display: block;
}

.hide {
    display: none;
}

.NavBar {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;

    .NavImg {
        width: 100%;
        height: 88px;
        display: flex;
        background-color: #fff;

        .leftLogo {
            flex: 1;
            padding: 20px 30px;

            img {
                width: 160px;
                height: 48px;
            }
        }

        .rightBar {
            flex: 1;
            text-align: right;
            padding: 28px 40px;

            img {
                width: 36px;
                height: 32px;
            }
        }
    }

    .navlist {
        // background-color: rgba($color: #000000, $alpha: .5);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        // display: none;
        text-align: right;

        .close {
            width: 36px;
            height: 36px;
            position: absolute;
            top: 26px;
            right: 38px;
        }

        .list {
            display: inline-block;
            width: 518px;
            height: 100vh;
            background-color: #fff;
            box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.3);
            padding-top: 130px;

            ul {
                li {
                    list-style: none;
                    display: flex;

                    .l {
                        flex: 2;
                        text-align: left;
                        padding-left: 60px;
                        padding-top: 100px;

                        .p1 {
                            font-size: 32px;
                            color: #333333;
                        }

                        .p2 {
                            font-size: 28px;
                            color: #333333;
                        }
                    }

                    .r {
                        flex: 1;
                        padding-right: 38px;
                        padding-top: 106px;

                        img {
                            width: 13px;
                            height: 25px;
                        }
                    }

                }
            }
        }
    }
}
</style>
